<template>
  <div class="introduce">
    <u-nav-bar :title="titleName" />
    <div class="introduce__ct">
      <info-component :info="basicInfo" :msgList="infoList" :carLabel="carLabel" />
      <div class="space__box"></div>
      <template v-if="Number(userType) !== UserTypesEm.CARRIER.value">
        <evaluate-component
          :labelList="evaluateLabelList"
          v-show="evaluateList.length > 0"
          :evaluateList="evaluateList"
          :currentId="userId"
          :commentNum="basicInfo.commentNum"
          @onMoreEvalute="onMoreEvalute"
        />
      </template>
    </div>
    <div class="btn" @click="onConcat">联系他</div>
  </div>
  <phonePopup-component :isShow="isTelPhoneShow" :telNumber="basicInfo.phone" @cancel_show="isTelPhoneShow = false" />
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'
import NavBar from '@/components/NavBar.vue'
import Info from './components/Info.vue'
import Evaluate from './components/Evaluate.vue'
import useIntroduce from './utils/useIntroduce'
import useEvaluate from './utils/useEvaluate'
import { UserTypesEm } from '@/store/enums'
import { useRouter, useRoute } from 'vue-router'
import PhonePopup from '@/components/PhonePopup.vue'

export default defineComponent({
  name: 'Introduce',
  components: {
    'u-nav-bar': NavBar,
    'info-component': Info,
    'evaluate-component': Evaluate,
    'phonePopup-component': PhonePopup
  },
  setup() {
    const { userId, userType } = useRoute().query as {
      userId: string // 司机/货主id
      userType: string // 用户类型 司机/货主
    }

    // 是否展示联系电话弹窗
    const isTelPhoneShow = ref(false)

    const router = useRouter()

    const titleName = ref<string>('')

    const { basicInfo, carLabel, infoList, handleGetIntroduce, evaluateLabelList } = useIntroduce(userId, userType)
    const { evaluateList, handleGetEvaluate, onMoreEvalute } = useEvaluate(userId, userType, router)

    if (UserTypesEm.CARGOOWNER.value === Number(userType)) {
      titleName.value = '货主简介'
      handleGetEvaluate()
    } else if (UserTypesEm.DRIVER.value === Number(userType)) {
      titleName.value = '司机简介'
      handleGetEvaluate()
    } else if (UserTypesEm.CARRIER.value === Number(userType)) {
      titleName.value = '承运人简介'
    }

    // 联系他/她
    const onConcat = (): void => {
      isTelPhoneShow.value = true
    }

    // handleGetEvaluate()
    handleGetIntroduce()
    return {
      onConcat,
      basicInfo,
      carLabel,
      evaluateLabelList,
      evaluateList,
      infoList,
      titleName,
      userId,
      onMoreEvalute,
      userType,
      UserTypesEm,
      isTelPhoneShow
    }
  }
})
</script>

<style lang="scss" scoped>
@import '@/style/variables.scss';
@import '@/style/mixins.scss';
.introduce {
  position: fixed;
  top: 0;
  bottom: 0;
  width: 100%;
  z-index: 100;
  @include flex-cloumn-width-height-100;
  background-color: $background-color-base;
  &__ct {
    @include flex-scroll-content-pd(24px 12px 0 12px);
    .space__box {
      width: 100%;
      height: 10px;
    }
  }
  .btn {
    width: 325px;
    height: 48px;
    background: linear-gradient(125deg, #74cdff 0%, #409eff 100%);
    border-radius: 24px;
    font-size: 16px;
    font-weight: 500;
    color: #ffffff;
    line-height: 48px;
    margin: 15px auto;
    text-align: center;
  }
}
</style>
